﻿<div [@routerTransition]>
    <div class="m-pricing-table-1 m-pricing-table-1--fixed">
        <div class="m-portlet">
            <div class="m-portlet__body">
                <div class="m-pricing-table-1__items row row-centered">
                    <div class="m-pricing-table-1__item col-lg-3 col-centered"
                         *ngFor="let editionWithFeatures of editionsSelectOutput.editionsWithFeatures;  let i = index">


                        <div class="m-pricing-table-1__visual">
                            <div class="m-pricing-table-1__hexagon1"></div>
                            <div class="m-pricing-table-1__hexagon2"></div>
                            <span class="m-pricing-table-1__icon m--font-brand">
                                <i class="fa {{editionIcons[i]}}"></i>
                            </span>
                        </div>


                        <span class="m-pricing-table-1__price">
                            {{editionWithFeatures.edition.displayName}}
                        </span>

                        <h2 class="m-pricing-table-1__subtitle" *ngIf="isFree(editionWithFeatures.edition)">
                            {{"Free" | localize}}
                        </h2>

                        <h2 class="m-pricing-table-1__subtitle" *ngIf="!isFree(editionWithFeatures.edition)">

                            <span class="m-pricing-table-1__label">{{appSession.application.currencySign}}</span> {{editionWithFeatures.edition.monthlyPrice}} {{"PerMonth" | localize}} /
                            <span class="m-pricing-table-1__label">{{appSession.application.currencySign}}</span>{{editionWithFeatures.edition.annualPrice}} {{"PerYear" | localize}}

                        </h2>

                        <span class="m-pricing-table-1__description">

                            <ng-container *ngFor="let feature of editionsSelectOutput.allFeatures">
                                <!--Checbox Feature-->
                                <ng-container *ngIf="isTrueFalseFeature(feature)">
                                    <i class="la la-check m--font-success" *ngIf="featureEnabledForEdition(feature,editionWithFeatures)"></i>
                                    <i class="la la-times m--font-metal" *ngIf="!featureEnabledForEdition(feature,editionWithFeatures)"></i>
                                </ng-container>
                                <ng-container *ngIf="isTrueFalseFeature(feature)">{{feature.displayName}}</ng-container>
                                <!--Checbox Feature-->
                                <!--Not Checbox Feature-->
                                <ng-container *ngIf="!isTrueFalseFeature(feature)">
                                    <i class="la la-check m--font-success"></i>
                                </ng-container>
                                <ng-container *ngIf="!isTrueFalseFeature(feature)">{{feature.displayName}}:{{getFeatureValueForEdition(feature,editionWithFeatures)}}</ng-container>
                                <!--Not Checbox Feature-->
                                <br />
                            </ng-container>

                        </span>

                        <div class="m-pricing-table-1__btn">

                            <button class="btn btn-warning m-btn m-btn--custom m-btn--pill m-btn--wide m-btn--uppercase m-btn--bolder m-btn--sm"
                                    (click)="upgrade(editionWithFeatures.edition, editionPaymentType.Upgrade)"
                                    *ngIf="isUserLoggedIn"
                                    [disabled]="!canUpgrade(editionWithFeatures.edition)">
                                {{"Upgrade" | localize}}
                            </button>

                            <button class="btn btn-success m-btn m-btn--custom m-btn--pill m-btn--wide m-btn--uppercase m-btn--bolder m-btn--sm"
                                    [routerLink]="['/account/register-tenant']"
                                    [queryParams]="{editionId: editionWithFeatures.edition.id, subscriptionStartType: subscriptionStartType.Free}"
                                    href="#"
                                    *ngIf="!isUserLoggedIn && isFree(editionWithFeatures.edition)">
                                {{"Start" | localize}}
                            </button>

                            <button class="btn btn-warning m-btn m-btn--custom m-btn--pill m-btn--wide m-btn--uppercase m-btn--bolder m-btn--sm"
                                    [routerLink]="['/account/register-tenant']"
                                    [queryParams]="{editionId: editionWithFeatures.edition.id, subscriptionStartType: subscriptionStartType.Trial}"
                                    href="#"
                                    *ngIf="!isUserLoggedIn && !isFree(editionWithFeatures.edition) && editionWithFeatures.edition.trialDayCount">
                                {{"FreeTrial" | localize}}
                            </button>

                            <button class="btn btn-primary m-btn m-btn--custom m-btn--pill m-btn--wide m-btn--uppercase m-btn--bolder m-btn--sm"
                                    [routerLink]="['/account/register-tenant']"
                                    [queryParams]="{editionId: editionWithFeatures.edition.id, subscriptionStartType: subscriptionStartType.Paid, editionPaymentType: editionPaymentType.NewRegistration}"
                                    href="#"
                                    *ngIf="!isUserLoggedIn && !isFree(editionWithFeatures.edition)">
                                {{"BuyNow" | localize}}
                            </button>

                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
